<template>
	<view class="comment-item-container">
		<view class="author-info">
			<image :src="comment.author.avatar" mode="aspectFill"></image>
			<view class="right">
				<view class="author-name">
					{{comment.author.author_name}}
					<template v-if="comment.to">
						<text class="reply-text">回复</text>
						{{comment.to}}
					</template>
				</view>
				<uni-dateformat class="time" :date="comment.create_time" format="yyyy年M月d日 hh:mm" />
			</view>
		</view>
		<view class="comment-content">{{comment.content}}</view>
		<text class="reply-btn" @click="reply({comment,is_reply})">回复</text>
		<view class="reply-list" v-if="comment.reply_list.length">
			<CommentItem @reply="reply" is_reply v-for="item in comment.reply_list" :key="item.id"
				:comment="item" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "CommentItem",
		props: {
			comment: Object,
			is_reply: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			reply(data) {
				if (data.is_reply) {
					data.comment.reply_id = data.comment.id
				}
				data.comment.comment_id = this.comment.id
				this.$emit('reply', data)
			}
		},
	}
</script>

<style lang="scss">
	.comment-item-container {
		padding: 20rpx;
		border-bottom: 1px solid #bbb;

		.author-info {
			@include flex(flex-start);

			image {
				border-radius: 12rpx;
				width: 80rpx;
				height: 80rpx;
			}
		}

		.right {
			margin-left: 20rpx;

			.author-name {
				font-size: 28rpx;

				.reply-text {
					margin: 0 20rpx;
					font-weight: bold;
				}
			}

			.time {
				color: $secondary;
				font-size: 24rpx;
			}
		}

		.comment-content {
			margin: 20rpx 0;
			font-size: 28rpx;
		}

		.reply-btn {
			font-size: 26rpx;
			padding: 0 16rpx;
			border: 1px solid;
			color: $secondary;
			border-radius: 20rpx;
		}

		.reply-list {
			margin-left: 50rpx;

			.comment-item-container {
				margin-top: 20rpx;
				border: 1px dashed $base-color;
				border-radius: 20rpx;
			}
		}
	}
</style>
